import React, {PureComponent} from 'react';
import {
	StyleSheet,
	View,
	ScrollView, Image, Text
} from 'react-native';
// npm install --save prop-types

// 引入屏幕宽高
let Dimensions = require('Dimensions');
let {width: WIDTH} = Dimensions.get('window');

/**
 * @FileName: FScrollViewDemo
 * @Author: mazaiting
 * @Date: 2018/6/9
 * @Description: 轮播图
 */
class ScrollImage extends PureComponent {
	/**
	 * 属性
	 */
	static propTypes = {
		// 所有的Image对象数组
		imageDataArr: []
	};
	/**
	 * 常量
	 */
	static defaultProps = {
		// 滚动时间
		DURATION: 1000
	};
	
	// 设置可变的和初始值
	constructor(props) {
		super(props);
		this.state = {
			// 当前页码
			currentPage: 0,
			// 标题
			title: this.props.imageDataArr[0].title
		}
	}
	
	/**
	 * 渲染
	 */
	render() {
		return (
			<View style={styles.container}>
				<ScrollView
					ref={'scrollView'}
					// 设置横向
					horizontal={true}
					// 隐藏水平滚动条
					showsHorizontalScrollIndicator={false}
					// 设置自动分页
					pagingEnabled={true}
					// 当一帧滚动结束
					onMomentumScrollEnd={(scrollView) => this.onAnimationEnd(scrollView)}
					// 开始拖拽, 夜神模拟器需要先点击一下，再拖拽
					onScrollBeginDrag={() => this.onScrollBeginDrag()}
					// 停止拖拽
					onScrollEndDrag={() => this.onScrollEndDrag()}
				>
					{this.renderAllImage()}
				</ScrollView>
				{/*指示器*/}
				<View style={styles.pageViewStyle}>
					{/*返回对应的标题*/}
					<Text style={{color:'white'}}>{this.state.title}</Text>
					{/*返回五个焦点*/}
					<View style={{flexDirection:'row'}}>
						{this.renderPageCircle()}
					</View>
				</View>
			</View>
		)
	}
	
	/**
	 * 实现一些复杂操作
	 * UI渲染完成
	 */
	componentDidMount() {
		// 开启定时器
		this.startTimer();
	}
	
	/**
	 * 返回所有图像
	 * @returns {Array}
	 */
	renderAllImage() {
		// 数组
		let allImage = [];
		// 拿到图像数组
		let imgsArr = this.props.imageDataArr;
		// 遍历
		for (let i = 0; i < imgsArr.length; i++) {
			// 取出单独的每一个对象
			let imgItem = imgsArr[i];
			// 创建组件装入数组
			allImage.push(
				<Image key={i} source={{uri: imgItem.url}} style={{width: WIDTH, height: 400}}/>
			)
		}
		// 返回数组
		return allImage;
	}
	
	/**
	 * 返回所有圆点
	 * @returns {Array}
	 */
	renderPageCircle() {
		// 定义一个数组，放置所有的圆点
		let indicatorArr = [];
		// 拿到图像数组
		let imgsArr = this.props.imageDataArr;
		// 定义样式
		let style;
		// 遍历
		for (let i = 0; i < imgsArr.length; i++) {
			// 判断
			style = (i === this.state.currentPage) ? {color: 'orange'} : {color: 'white'};
			// 把圆点装入数组
			indicatorArr.push(
				// 设置多个样式用[]来包含
				<Text key={i} style={[{fontSize: 50}, style]}>&bull;</Text>
			)
		}
		return indicatorArr;
	}
	
	/**
	 * 当一帧滚动结束的时候调用
	 */
	onAnimationEnd(scrollView) {
		// 1. 求出水平方向的偏移量
		let offSetX = scrollView.nativeEvent.contentOffset.x;
		// 2. 根据偏移量求出当前页数
		let currentPage = Math.floor(offSetX / WIDTH);
		// 3. 更新状态机, 重新绘制UI
		this.setState({
			currentPage: currentPage,
		})
	}
	
	/**
	 * 开启定时器
	 */
	startTimer() {
		// 1. 拿到ScrollView
		let scrollView = this.refs.scrollView;
		// 拿到图像数组
		let imgCount = this.props.imageDataArr.length;
		// 2. 添加定时器
		this.timer = setInterval(() => {
			// ToastAndorid.show(""+ DURATION, ToastAndorid.SHORT);
			// 2.1 设置圆点
			let activePage;
			// 2.2 判断
			// ToastAndorid.show(""+ this.state.currentPage, ToastAndorid.SHORT);
			if ((this.state.currentPage + 1) >= imgCount) {
				activePage = 0;
			} else {
				activePage = this.state.currentPage + 1;
			}
			// 2.3 更新状态机
			this.setState({
				currentPage: activePage,
				title: this.props.imageDataArr[activePage].title
			});
			// 2.4 让ScrollView滚动起来
			let offSetX = activePage * WIDTH;
			// 2.5 滚动
			scrollView.scrollResponderScrollTo({x: offSetX, y: 0, animated: true})
		}, this.props.DURATION)
	}
	
	/**
	 * 调用开始拖拽
	 */
	onScrollBeginDrag() {
		// 停止定时器
		clearInterval(this.timer)
	}
	
	/**
	 * 调用停止拖拽
	 */
	onScrollEndDrag() {
		this.startTimer()
	}
}

const styles = StyleSheet.create({
	container: {
		backgroundColor: '#DDD'
	},
	pageViewStyle: {
		width: WIDTH,
		height: 50,
		backgroundColor: 'rgba(0,0,0,0.4)',
		// 定位
		position: 'absolute',
		bottom: 0,
		// 设置主轴方向
		flexDirection: 'row',
		justifyContent: 'space-between',
		// 设置侧轴方向对齐方式
		alignItems: 'center'
	}
});

module.exports = ScrollImage;